<template>
    <div class="Tab">
        <div class="Main_main">
            <div class="Top_dl">
                <img class="dl_img"
                    :src="item.socoimage">
                <p style="font-size: 18px; padding-top: 10px;">{{ item.sococity }}医院</p>
                <ul class="right_tit">
                    <li>{{ item.socostate }}</li>
                    <li>{{ item.socolv }}</li>
                </ul>
                <div class="footer_tit">
                    <van-icon name="orders-o" size="16px" style="padding-top: 8px;padding-left: 5px;" /><span
                        style="font-size: 12px;">医院介绍：{{ item.sococity }}医院是国家级药品管理直属医院</span><br>
                    <van-icon name="location-o" size="16px" style="padding-top: 8px;padding-left: 5px;" /><span
                        style="font-size: 14px">{{ item.sococity }}</span><br>
                    <van-icon name="phone-o" size="16px" style="padding-top: 8px;padding-left: 5px;" /><span
                        style="font-size: 12px;">101-12365894</span>
                </div>
            </div>
            <div class="Main_dui" >
                <p style="font-size: 18px;padding: 10px;"><b>医生团队</b><span
                        style="font-size: 16px; float: right;color: #ccc;">更多></span></p>
                         <div class="doc_list" style="font-size: 14px;"  >
                               <div v-for="(items,index) in doclist" :key="index">
                         <div v-if="item.socoadmin==items.doctoradministre">
                          <img style=" float: left; border-radius: 100%; width: 50px; height: 50px; margin: 8px;"
                        :src="items.doctorimage">
                    <p style="font-size: 16px; padding-top: 6px;"><b>{{ items.doctorname }}</b>&ensp;<span
                            style="font-size: 12px;"><b>{{ items.doctorstate }}</b></span>  <button class="gua_btn" @click="Registered(items)">去挂号</button></p>
                    <p>{{items.doctoradministre}}|{{items.doctorcity}}人民医院</p>
                    <p class="tit_p">擅长：{{ items.doctordescword }}</p>
                  
                    </div>
                    </div>
               
                </div>
            </div>
            <img style=" border-radius: 15px; width: 96%; height: 13vh; margin-left: 2%;margin-top: 30px"
                src="../../img/医院详情头部.png">
            <div class="doc_tit">
                <p style="font-size: 18px;padding: 10px;"><b>医院咨询</b><span
                        style="font-size: 16px; float: right;color: #ccc;">更多></span></p>
                <div class="doc_tit_list">
                    <p class="doc_p" style=" padding-top: 10px;; font-size: 15px;padding-left: 5px;">
                        {{ item.socodescword }}</p>
                    <p style="margin-top: 10px"><img
                            style=" float: left; width: 20px; height: 20px; margin-left: 10px;border-radius: 100px;"
                            :src="item.socoimage">
                        <span>&ensp;{{ item.sococity }}医院</span>
                    </p>
                </div>
                <div class="doc_tit_list">
                    <p class="doc_p" style=" padding-top: 10px;; font-size: 15px;padding-left: 5px;">
                        {{ item.socodescword }}</p>
                    <p style="margin-top: 10px"><img
                            style=" float: left; width: 20px; height: 20px; margin-left: 10px;border-radius: 100px;"
                            :src="item.socoimage">
                        <span>&ensp;{{ item.sococity }}医院</span>
                    </p>
                </div>
                <div class="doc_tit_list">
                    <p class="doc_p" style=" padding-top: 10px;; font-size: 15px;padding-left: 5px;">
                        {{ item.socodescword }}</p>
                    <p style="margin-top: 10px"><img
                            style=" float: left; width: 20px; height: 20px; margin-left: 10px;border-radius: 100px;"
                            :src="item.socoimage">
                        <span>&ensp;{{ item.sococity }}医院</span>
                    </p>
                </div>
                <div class="doc_tit_list">
                    <p class="doc_p" style=" padding-top: 10px;; font-size: 15px;padding-left: 5px;">
                        {{ item.socodescword }}</p>
                    <p style="margin-top: 10px"><img
                            style=" float: left; width: 20px; height: 20px; margin-left: 10px;border-radius: 100px;"
                            :src="item.socoimage">
                        <span>&ensp;{{ item.sococity }}医院</span>
                    </p>
                </div>
                <div class="doc_tit_list">
                    <p class="doc_p" style=" padding-top: 10px;; font-size: 15px;padding-left: 5px;">
                        {{ item.socodescword }}</p>
                     <p style="margin-top: 10px">
                        <img style=" float: left; width: 20px; height: 20px; margin-left: 10px;border-radius: 100px;" :src="item.socoimage">
                        <span>
                            &ensp;{{ item.sococity }}医院
                        </span>
                    </p>
                </div>
            </div>
            <div class="doc_jiu">
                <p style="font-size: 18px;padding: 10px;"><b>就诊评价</b><span
                        style="font-size: 16px; float: right;color: #ccc;">更多></span></p>
                <div class="jiu_list" style="float: left; border-bottom: 1px solid #ccc;display: flex;">
        <img style="width: 50px; height:50px;border-radius: 100%; margin: 5px" src="../../assets/image/1010g.png"/>
                  <div>
                    <p>m**</p>
                    <p>2024/04/30 15:44:17</p>
                       <p style="height: 19px;overflow: hidden;">{{item.socodescword}} &ensp;</p><span  @click="isExpanded=!isExpanded" 
                            style="color: blue;height: 20px;">{{ isExpanded ? '收起' : '展开' }}</span>
                    <div style="margin-left: 50px;" class="content" v-if="isExpanded">
                        <p>{{item.socodescword}}</p>
                    </div>
                  </div>
    
                </div>
                    <div class="jiu_list" style="float: left; border-bottom: 1px solid #ccc;display: flex;">
        <img style="width: 50px; height:50px;border-radius: 100%; margin: 5px" src="../../assets/image/1010g.png"/>
                  <div>
                    <p>m**</p>
                    <p>2024/04/30 15:44:17</p>
                       <p style="height: 19px;overflow: hidden;">{{item.socodescword}} &ensp;</p><span  @click="isExpanded=!isExpanded" 
                            style="color: blue;height: 20px;">{{ isExpanded ? '收起' : '展开' }}</span>
                    <div style="margin-left: 50px;" class="content" v-if="isExpanded">
                        <p>{{item.socodescword}}</p>
                    </div>
                  </div>
    
                </div>
                  <div class="jiu_list" style="float: left; border-bottom: 1px solid #ccc;display: flex;">
                  <img style="width: 50px; height:50px;border-radius: 100%; margin: 5px" src="../../assets/image/1010g.png"/>
                  <div>
                    <p>m**</p>
                    <p>2024/04/30 15:44:17</p>
                       <p style="height: 19px;overflow: hidden;">{{item.socodescword}} &ensp;</p><span  @click="isExpanded=!isExpanded" 
                            style="color: blue;height: 20px;">{{ isExpanded ? '收起' : '展开' }}</span>
                    <div style="margin-left: 50px;" class="content" v-if="isExpanded">
                        <p>{{item.socodescword}}</p>
                    </div>
                  </div>
    
                </div>
                <img style=" border-radius: 15px; width: 96%; height: 13vh; margin-left: 2%;margin-top: 20px"
                    src="../../img/医院详情头部.png">
            </div>
            <div class="footer_btn" style="float: left; width: 100%; height: 12vh;">
                <button style="color: green; background-color: #fff;">在线咨询</button>
                <button style="color: #fff;background-color: green" @click="booking">预约挂号</button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import {ref,defineProps} from 'vue'
const router = useRouter();
const isExpanded=ref(false)
import axios from '@/utils/axios/axios'

const doclist=ref([])
const props=defineProps({
    item:Object,
    data:Object
})

console.log(props);

     const  Registered=(val)=> {
        const resquery=JSON.stringify(val)
        console.log(resquery);
           router.push('/registered?resquery='+resquery)
        }
        const userlist=async()=>{
        await axios.get('/api/doctorlist').then(res=>{
            console.log(res);
            doclist.value=res.data.res
        })
        }
        userlist()
// export default {

//     data() {
//         return {
         
//             isExpanded1: false,
//             isExpanded2: false,
//         };
//     },

//     methods: {
        
//     },
//     props: {
//         data: Object
//     }
// };



</script>

<style scoped lang="scss">
h2 {
    color: #007bff;
}

.Tab {
    width: 100%;
    background: #e8e9eb;
    height: 81vh;
    overflow: scroll;
}

.Main_main {
    width: 100%;
    height: 150%;
}

.Top_dl {
    width: 96%;
    height: 30vh;
    background: rgb(255, 255, 255);
    margin-left: 2%;
    margin-top: 2%;
    border-radius: 10px;
    overflow: hidden;
}

.dl_img {
    width: 80px;
    height: 80px;
    margin: 10px;
    border-radius: 10%;
    float: left;
}

.right_tit li {
    float: left;
    margin-left: 5px;
    border: 1px solid rgb(69, 149, 57);
    border-radius: 5px;
    padding: 2px;
    color: rgb(69, 149, 57);
    margin-top: 5px;
}

.footer_tit {
    width: 100%;
    height: 15vh;
    float: left;
}

.Main_dui {
    width: 96%;
    height: 520px;
    margin-left: 2%;
    margin-top: 2vh;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.doc_list {
    width: 100%;
    height: 15vh;
    >div{
        p{
            line-height: 20px;
        }
        >div{
            height: 120px;
        }
    }

}

.tit_p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* 设置显示的行数 */
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5em;
    /* 设置行高 */
    max-height: 3em;
    /* 设置最大高度，等于行高乘以行数 */
    font-size: 14px;
}

.gua_btn {
    width: 70px;
    height: 30px;
    background: rgb(32, 202, 6);
    border: none;
    border-radius: 15px;
    color: #fff;
   float: right;
}

.doc_tit {
    width: 96%;
    margin-left: 2%;
    margin-top: 2vh;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.doc_tit_list {
    width: 100%;
    height: 13vh;
    border-bottom: 1px solid #ccc;
}

.doc_p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    /* 设置显示的行数 */
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5em;
    /* 设置行高 */
    max-height: 3em;
    /* 设置最大高度，等于行高乘以行数 */
    font-size: 14px;
}

.doc_jiu {
    width: 96%;
    margin-left: 2%;
    margin-top: 2vh;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #333;
    transition: transform 0.3s ease;
}

.header .arrow.expanded {
    transform: rotate(180deg);
}

.content {
    padding: 10px;
    background-color: #fff;
}

.content p {
    margin: 0 0 10px;
}

.footer_btn button {
    border: none;
    width: 44%;
    height: 50%;
    border-radius: 40px;
    font-size: 18px;
    margin-left: 15px;
    z-index: 999;
    border: 1px solid #ccc;

}

.footer_btn {
    position: fixed;
    top: 93%;
    background: #fff;
}
</style>